<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>新闻界面</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>

	<div id="app">
		<el-form :inline="true" :model="select" class="user-search">
			<el-form-item label="搜索：">
				<el-input size="small" v-model="select.newsId" placeholder="输入新闻编号"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="datalist" border style="width: 100%">
			<el-table-column fixed prop="newsId" label="新闻编号" width="150">
			</el-table-column>
			<el-table-column prop="newsTitle" label="新闻标题" width="120">
			</el-table-column>
			<el-table-column prop="newsAuthor" label="新闻作者" width="120">
			</el-table-column>
			<el-table-column prop="newsDate" label="发布日期" width="120" :formatter="formatDate">
			</el-table-column>
			<el-table-column prop="newsContent" label="发布内容" width="500">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="300">

				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>

		</el-table>


		<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
			<el-form label-width="120px" :model="editForm" ref="editForm">
				<el-form-item label="新闻编号" prop="newsId">
					<el-input size="small" v-model="editForm.newsId" auto-complete="off" placeholder="请输入新闻编号">
					</el-input>
				</el-form-item>
				<el-form-item label="新闻标题" prop="newsTitle">
					<el-input size="small" v-model="editForm.newsTitle" auto-complete="off" placeholder="请输入新闻标题">
					</el-input>
				</el-form-item>
				<el-form-item label="新闻作者" prop="newsAuthor">
					<el-input size="small" v-model="editForm.newsAuthor" auto-complete="off" placeholder="请输入新闻作者">
					</el-input>
				</el-form-item>
				<el-form-item label="发布日期" prop="newsDate">
					<el-input size="small" v-model="editForm.newsDate" auto-complete="off" placeholder="请输入发布日期">
					</el-input>
				</el-form-item>
				<el-form-item label="发布内容" prop="newsContent">
					<el-input size="small" v-model="editForm.newsContent" auto-complete="off" placeholder="请输入发布内容">
					</el-input>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="closeDialog">取消</el-button>
				<el-button size="small" type="primary" :loading="loading" class="title" @click="updateForm('editForm')">
					更新</el-button>
				<el-button size="small" type="primary" :loading="loading" class="title" @click="addForm('editForm')">添加
				</el-button>
			</div>
		</el-dialog>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				datalist: [],
				selectid: [],
				loading: false, //是显示加载
				title: "添加",
				editFormVisible: false, //控制编辑页面显示与隐藏
				editForm: {
					newsId: '',
					newsTitle: '',
					newsAuthor: '',
					newsDate: '',
					newsContent: '',
				},
				select: {
					newsId: "",
				},
				delet: { newsId: '' }
			},
			created() {
				this.all()
			},
			methods: {
				all() {
					axios.get('http://localhost:8080/all').then(res => {
						console.log(this.datalist)
						console.log(res)
						this.datalist = res.data
						console.log(this.datalist)
					})
				},
				formatDate(row, column) {
					// 获取单元格数据
					let data = row[column.property]
					if (data == null) {
						return null
					}
					let dt = new Date(data)
					return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
				},
				search() {
					console.log(this.select.newsId)
					axios.get('http://localhost:8080/selectid', {
						params: {
							id: this.select.newsId
						}
					}).then(res => {
						this.datalist = []
						let arr = []
						arr.splice(0, 1, res.data)
						this.datalist = arr
						console.log(this.datalist)

					})
				},
				handleEdit: function (index, row) {
					this.editFormVisible = true;
					if (row != undefined && row != "undefined") {
						this.title = "编辑信息"
						this.editForm.newsId = row.newsId;
						this.editForm.newsTitle = row.newsTitle;
						this.editForm.newsAuthor = row.newsAuthor;
						this.editForm.newsDate = row.newsDate;
						this.editForm.newsContent = row.newsContent;

					} else {
						this.title = "添加信息"
						this.editForm.newsId = ""
						this.editForm.newsTitle = ""
						this.editForm.newsAuthor = ""
						this.editForm.newsDate = ""
						this.editForm.newsContent = ""
					}
				},
				closeDialog() {
					this.editFormVisible = false;
				},
				addForm(editData) {
					this.$refs[editData].validate((valid) => {
						if (valid) {
							axios.post('http://localhost:8080/insert', this.editForm).then(res => {
								console.log(res)
								
								this.editFormVisible = false;
								this.$message({
									type: "success",
									message: "保存成功！",
								});
								this.all()
							})

						}

					});
				},
				del(index, row) {
					this.delet.newsId = row.newsId
					console.log(this.delet.newsId)
					axios.post('http://localhost:8080/delete', this.delet).then(res => {
						this.$message({
							type: "success",
							message: "删除成功！",
						});
						console.log(res)
						this.all()
					})
				},
				updateForm(editData){
					this.$refs[editData].validate((valid) => {
						if (valid) {
							axios.post('http://localhost:8080/update', this.editForm).then(res => {
								console.log(res)
								
								this.editFormVisible = false;
								this.$message({
									type: "success",
									message: "更改成功！",
								});
								this.all()
							})

						}

					});
				}
				

			}
		});
	</script>
</body>

</html>